<template>
  <div class="addressManage">
    <headerI title="收货地址" />
    <div class="center">
      <ul>
        <li v-for="(item, idx) in address" :key="idx">
          <div class="center-box">
            <div class="center-header">
              <span class="user-name">{{ item.name }}</span>
              <div class="header-box">
                <span class="user-number">{{ item.number }}</span>
                <span class="user-remark">{{ item.remark }}</span>
              </div>
            </div>
            <span class="add">{{ item.add }}</span>
            <span class="division"></span>
            <div class="center-foot">
              <div class="address">
                <span
                  class="option"
                  :class="{ current: current == item.id }"
                  @click="choice(item)"
                ></span>
                <span class="text">默认地址</span>
              </div>
              <div class="foot-right">
                <div class="compile">
                  <img
                    src="../../assets/img/address-manage/address management_icon_edit@2x.png"
                    alt=""
                  />
                  <span @click="copyreader(item)">编辑</span>
                </div>
                <div class="delete" @click="del(item)">
                  <img
                    src="../../assets/img/address-manage/address management_icon_delete@2x.png"
                    alt=""
                  />
                  <span>删除</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <span class="augment" @click="add()">新增收货地址</span>
  </div>
</template>

<script>
import headerI from "../../components/indent-header.vue";

export default {
  name: "defaultHtml",
  components: {
    headerI,
  },
  data() {
    return {
      current: 1,
      address: [
        {
          name: "林设计",
          number: "15119565231",
          remark: "公司",
          add: "广东省 深圳市 南山区 深圳办公大楼239号",
          choice: true,
          id: 1,
        },
        {
          name: "方画画",
          number: "15117865987",
          remark: "学校",
          add: "广东省 深圳市 龙岗区 设计街道4098号设计大厦三栋左侧308",
          choice: false,
          id: 2,
        },
      ],
    };
  },
  methods: {
    choice(item) {
      this.current = item.id;
    },
    del(item) {
      this.address.splice(item, 1);
    },
    add() {
      this.$router.push({
        path: `/newaddress`,
        query: {
          arr: this.address,
        },
      });
    },
    copyreader(item){
      console.log(item);
            this.$router.push({
        path: `/newaddress`,
        query: {
          arr: this.address,
          id:item.id
        },
      });
    }
  },
  mounted() {
    if (this.$route.query.arr1) {
      this.address = this.$route.query.arr1;
    }
    let arr = this.$route.query.arr;
    let num = 0;
    if (this.$route.query.arr) {
      this.address.forEach((item) => {
        if (item.id == arr[4]) {
          num = item.id;
        }
      });
      if (num == 0) {
        this.address.push({
          name: arr[0],
          number: arr[1],
          add: arr[2] + arr[3],
          id: arr[4],
          choice: false,
          remark: "学校",
        });
      } else {
        this.address[num - 1].name = arr[0];
        this.address[num - 1].number = arr[1];
        this.address[num - 1].add = arr[2] + arr[3];
      }
    }
    console.log(this.address);
  },
};
</script>

<style lang="less" scoped>
.addressManage {
  background: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.center {
  margin-left: 0.02rem;
  ul {
    li {
      margin-top: 0.12rem;
      width: 3.73rem;
      height: 1.54rem;
      background: #ffffff;
      .center-box {
        padding: 0.16rem 0 0.14rem;
        margin: 0 0.14rem;
        .center-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 3.43rem;
          .user-name {
            display: block;
            font-size: 0.17rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .header-box {
            display: flex;
            .user-number {
              display: block;
              font-size: 0.14rem;
              font-family: PingFang SC;
              color: #333333;
            }
            .user-remark {
              margin-left: 0.04rem;
              display: block;
              font-size: 0.1rem;
              font-family: PingFang SC;
              color: #ffffff;
              width: 0.36rem;
              padding: 0.005rem 0;
              background: #1b7373;
              border-radius: 4px;
              text-align: center;
            }
          }
        }
        .add {
          margin-top: 0.18rem;
          display: block;
          font-size: 0.14rem;
          font-family: PingFang SC;
          color: #333333;
          height: 0.48rem;
        }
        .division {
          display: block;
          width: 3.43rem;
          height: 0px;
          border: 0.01rem solid #f5f5f5;
        }
        .center-foot {
          margin-top: 0.12rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .address {
            display: flex;
            align-items: center;
            .option {
              width: 0.13rem;
              height: 0.13rem;
              background: #f0f0f0;
              border-radius: 50%;
              display: block;
            }
            .current {
              background: #1b7373;
            }
            .text {
              margin-left: 0.08rem;
              display: block;
              font-size: 0.14rem;
              font-family: PingFang SC;
              color: #333333;
            }
          }
          .foot-right {
            display: flex;
            .compile {
              display: flex;
              align-items: center;
              img {
                width: 0.24rem;
                height: 0.24rem;
                display: block;
              }
              span {
                display: block;
                font-size: 0.14rem;
                font-family: PingFang SC;
                color: #333333;
              }
            }
            .delete {
              .compile();
              margin-left: 0.36rem;
            }
          }
        }
      }
    }
  }
}
.augment {
  display: block;
  width: 3.43rem;
  background: #1b7373;
  padding: 0.11rem 0 0.12rem;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 0.8rem;
  left: 0.16rem;
}
</style>